<template>
	<view class="content">
		<!-- 顶部扫一扫、搜索栏和消息 start -->
		<view class="top-bar">
			<view class="scan-icon" @click="scan_code">
				<image lazy-load="true"  src="../../static/images/scan-ico.png" class="ico"></image>
				<view class="text">扫一扫</view>
			</view>
			<view class="search-input">
			<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
			<input type="text"  placeholder="北欧简约风沙发" v-model="inputVal" confirm-type="search" @confirm="search_good" placeholder-style="color:#cccccc">
			<image lazy-load="true" v-if="inputVal" @click="cleanInput()" src="../../static/images/close-btn.png" class="close-btn"></image>
				
			</view>
			<view class="message-icon" @click="goNew">
				<image lazy-load="true"  src="../../static/images/message-ico.png" class="ico"></image>
				<view class="text">消息</view>
				<view v-if="show_notice>0" class="badge_d" ></view>
			</view>
		</view>
		<!-- 顶部扫一扫、搜索栏和消息 end -->
		<!-- 搜索关键词 start -->
		<view class="key-word-box">
			<view class="key-word">
				<view @click="tags_search('')">
					所有商品
				</view>
				<view v-for="(item,key) in tags" :key="key" @click="tags_search(item)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 搜索关键词 end -->
		<!-- 商品tab start -->
		<view class="product-tab-title">
			<view class="active" @click="setActive()">
				<view class="tab-title" :style="{color: color1}">精彩活动</view>
				<image lazy-load="true"  src="../../static/images/underline.png" class="underline" v-if="showUnderline == 1"></image>
			</view>
			<!--  -->
			<view class="classify" @click="setClassify()">
				<view class="tab-title" :style="{color: color2}">分类</view>
				<image lazy-load="true"  src="../../static/images/underline.png" class="underline" v-if="showUnderline == 2"></image>
			</view>
		</view>
		<!-- 商品tab end -->
		<!-- 首页轮播 start -->
		<view class="index-swiper">
			<swiper :indicator-dots="true" indicator-active-color="gray" indicator-color="#cccccc" :autoplay="true" v-if="showUnderline == 1" class="carousel">
				<swiper-item v-for="(item,key) in bannerList" :key="key">
					<image lazy-load="true"  :src="item.image"  @click="goDetails(item.store_sku_id)" class="carousel"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 首页轮播 end -->
		<!-- 分类 start -->
		<view v-if="showUnderline == 2" class="classify-content">
			<view class="goods" v-for="(item,key) in detailList.categories" :key="key" @click="goGoodsList(item.id)">
				<view class="img"><image lazy-load="true"  :src="item.logo" mode="aspectFit" class="img"></image></view>
				<view class="title">{{item.name}}</view>
			</view>
			<navigator url="../classify-more/classify-more">
				<view class="goods">
					<view class="img"><image lazy-load="true"  src="../../static/images/7.png" class="img"></image></view>
					<view class="title">更多>></view>
				</view>
			</navigator>
		</view>
		<!-- 分类 end -->
		<!-- MUST BUY start -->
		<view class="must-buy">
			<view class="must-buy-title">MUST BUY <br>THE FIRST PUSH <br>必买首推款</view>
			<view class="img-box" v-for="(item,key) in mustBuy" :key="key"><image lazy-load="true"  :src="item.image" @click="goDetails(item.store_sku_id)" class="must-buy-img"></image></view>
		</view>
		<!-- MUST BUY end -->
		<!-- 时尚尖货 strat -->
		<view class="fashion-goods">
			<view class="title"><image lazy-load="true"  src="../../static/images/fashion-goods-title.png" class="title-img"></image></view>
			<view class="fashion-list" v-for="(item,key) in fashionList" :key="key">
				<view class="goods"><image lazy-load="true"  :src="item.image" @click="goDetails(item.store_sku_id)" class="goods-img"></image></view>
			</view>
		</view>
		<!-- 时尚尖货 end -->
		<!-- 必抢好物 start -->
		<view class="grab-good">
			<view class="title">WE MUST <br>GRAB GOOD THINGS <br>必抢好物</view>
			<view class="good-list">
				<view class="goods" v-for="(item,key) in mustGrab" :key="key"><image lazy-load="true"  :src="item.image" @click="goDetails(item.store_sku_id)" class="good-img"></image></view>
			</view>
		</view>
		<!-- 必抢好物 end -->
		<!-- 猜你喜欢 start -->
		<view class="guess-u-like">
			<view class="title">GUESS YOU LIKE IT <br>猜你喜欢</view>
			<view class="list">
				<view class="goods" v-for="(item,key) in guessLike" :key="key">
					<view class="img"><image lazy-load="true"  :src="item.image" @click="goDetails(item.store_sku_id)" class="img"></image></view>
					<!-- <view class="goods-title">
						<view class="name">简约现代风</view>
						<view class="price">￥1999</view>
					</view>
					<view class="position">睿邦家私体验店>></view> -->
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 end -->
		<view class="bottom-text">已经到底了 (ㄒoㄒ)</view>
	</view>
</template>

<script>
	export default {
		//data start
		data() {
			return {
				showUnderline:1,
				color1:"#000000",
				color2:"#999999",
				hideBody1:false,
				tags:[],
				bannerList:[],
				fashionList:[],
				guessLike:[],
				mustBuy:[],
				mustGrab:[],
				detailList:[],
				show_notice:0,
				inputVal:''
			}
		},
		onLoad() {
			
			var self = this;
			self.show_notice = parseInt(uni.getStorageSync('notice'));
			//关键字
			this.$request.request({
				url:'/search/goods_tags',
				success:function(res){
					if(res.code==200){
						self.tags = res.result;
					}else{
						
					}
				}
			});
			this.$request.request({
				url:'/home',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.banner.forEach((item,index)=>{
							x.banner[index].image=self.$http_img(item.image);
						});
						x.must_buy.forEach((item,index)=>{
							x.must_buy[index].image=self.$http_img(item.image);
						});
						x.fashion.forEach((item,index)=>{
							x.fashion[index].image=self.$http_img(item.image);
						});
						x.must_grab.forEach((item,index)=>{
							x.must_grab[index].image=self.$http_img(item.image);
						});
						x.guess_like.forEach((item,index)=>{
							x.guess_like[index].image=self.$http_img(item.image);
						});
						self.bannerList=x.banner;
						self.fashionList=x.fashion;
						self.guessLike=x.guess_like;
						self.mustBuy=x.must_buy;
						self.mustGrab=x.must_grab;
					}else{
						
					}
				}
			});	
		},
		//data end
		//methods start
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			cleanInput(){
				this.inputVal ="";
				console.log(11)
			},
			setActive(){
				this.showUnderline = 1;
				this.color1 = "#000000";
				this.color2 = "#999999";
			},
			setClassify(){
				var self = this;
				this.showUnderline = 2;
				this.color1 = "#999999";
				this.color2 = "#000000";
				this.$request.request({
					url:'/category/recommend',
					data:{
						
					},
					success:function(res){
						if(res.code==200){
							self.detailList = res.result;
							self.detailList.categories.forEach((item,index)=>{
								self.detailList.categories[index].logo = self.$imgUrl + item.logo
							})
						}else{
							
						}
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+id
				});
			},
			goNew(){
				uni.setStorageSync('notice',0);
				uni.navigateTo({
				    url: '../news/news'
				});
			},
			goGoods(num){
				uni.navigateTo({
				    url: '../local-store-item/local-store-item?id='+num
				});
			},
			shoBg(){
				this.hideBody1 = true;
				console.log(1)
			},
			scan_code(){
				var self = this;
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						console.log(self.$request.share_url)
						var index = res.result.indexOf(self.$request.share_url);
						if(index === 0){
							uni.redirectTo({
								url:'../redirect/redirect?q='+encodeURIComponent(res.result)
							})
						}else{
							uni.showToast({
								title:'暂无该内容',
								duration:1000,
								icon:'none'
							})
						}
				    }
				});
			},
			goGoodsList(id){
				uni.navigateTo({
				    url: '../good-list/good-list?id='+id
				});
			},
			search_good(e){
				uni.navigateTo({
				    url: '../good-list/good-list?search='+encodeURIComponent(e.detail.value)
				});
			},
			tags_search(tag){
				uni.navigateTo({
				    url: '../good-list/good-list?search='+encodeURIComponent(tag)
				});
			}
		},
		//methods end
	}
</script>

<style>
	@import url("index.css");
</style>
